//假设设计稿尺寸为1920x*1080px的屏幕分辨率
//1920px = 100vw
//1080px = 100vh

//默认设计稿的宽度
$designWidth: 1440;
//默认设计稿的高度
$designHeight: 900;

::v-deep .el-dialog {
  margin-top: 7vh !important;
}

::v-deep .el-button {
  border-radius: 8px;
  border: 1px solid #e5e5ee !important;
  font-weight: 400;
  height: vh(34) !important;
  font-size: vh(14);
  line-height: vh(34) !important;
  color: #0073ff;
}

/* 设置滚动条宽度 */
::-webkit-scrollbar {
  width: 2px; /* 垂直滚动条的宽度 */
  height: 3px; /* 水平滚动条的高度 */
}

/* 设置滚动条轨道（背景） */
::-webkit-scrollbar-track {
  background: #f1f1f1; /* 设置轨道的背景颜色 */
  border-radius: 100px; /* 设置轨道的圆角 */
}

/* 设置滚动条拇指（可拖动部分） */
::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.2); /* 设置滚动条拇指的背景颜色 */
  border-radius: 10px; /* 设置拇指的圆角 */
}

/* 鼠标悬停时的滚动条拇指样式 */
::-webkit-scrollbar-thumb:hover {
  background: #555; /* 悬停时的滚动条颜色 */
}

/* 设置滚动条的右下角区域 */
::-webkit-scrollbar-corner {
  background: #f1f1f1;
}

//px转为vw的函数
@function vw($px) {
  @if type-of($px) == number {
    @return ($px / $designWidth) * 100vw;
  } @else if type-of($px) == string and str-index($px, "var(") {
    @return calc(#{$px} / $designWidth * 100vw);
  } @else {
    @error 'Invalid value type. Only numbers and CSS variables are allowed.';
  }
}

//px转为vh的函数
@function vh($px) {
  @if type-of($px) == number {
    @return ($px / $designHeight) * 100vh;
  } @else if type-of($px) == string and str-index($px, "var(") {
    @return calc(#{$px} / $designHeight * 100vh);
  } @else {
    @error 'Invalid value type. Only numbers and CSS variables are allowed.';
  }
}
